<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动定位</title>
		<style>
			/* 每个div设置高宽：300px，倒角50%，设置字体:10em，垂直居中 */
			span{
				width: 200px;
				height: 200px;
				bord er: 1px solid red;
				border-radius: 50%;
				font-size: 10em;
				text-align: center;
				line-height: 200px;
				color: #fff;
				/* 盒子阴影：块级元素上 */
				/* 盒子阴影的属性值：X Y 模糊半径 扩散半径[可选] 颜色 内外阴影[可选]*/
				box-shadow: 5px 5px 100px 20px #aaffff inset;
				float: left;
				fl oat: right;
				fl oat: none;
			}
			span.d1{
				background-color: #ff5500;
			}
			span.d2{
				background-color: #00ffff;
			}
			span.d3{
				background-color: #aa00ff;
				/* 清除浮动：celar属性：left */
				clear: left;
			}
			span.d4{
				background-color: #ff557f;
				/* 清除浮动：clear属性：both 两端浮动，效率低*/
				clear: both;
			}
			span.d5{
				background-color: #00aaff;
			}
		</style>
	</head>
	<body>
		<!-- 什么是定位？ 将元素指定到页面某个特定位置上
		   定位五种：①普通流定位【文档流dw】将元素按照块、行、行块特点排列
		            ②浮动定位：将元素飘起来，作用：左右布局
					定义：让元素脱离文档流的一种定位方式，用于页面文本盒图片环绕以及布局，
					     一旦浮动转换为块元素。
					float浮动属性:left、right、none【定义浮动】
					clear清除属性：:left、right、both【清除浮动】
					③相对定位：相对于父级，按照body位置执行，占用文档流
					④绝对定位：针对于父级，按照页面左顶角执行，失去文档流
					左栏弹出:相对定位+绝对定位实现【Jquery框架：页面动态效果】
					⑤固定定位：将元素固定在页面指定位置
		 -->
		 <!-- 浮动元素-->
		 <span class="d1">1</span>
		 <span class="d2">2</span>
		 <span class="d3">3</span>
		 <span class="d4">4</span>
		 <span class="d5">5</span>
	</body>
</html>